<template>
  <div :class="['cockpit-card-modal', `cockpit-card-modal-${type}`]">
    <h1 :style="{marginTop: replyTime ? '0' : '12px'}">{{ replyTime }}</h1>
    <p class="ellipsis-2">{{ depart }}</p>
    <p>{{ isReply == 1 ? '已回复' : '未回复' }}</p>
    <!-- <p>发出通告</p>
    <p>事件进行中</p> -->
  </div>
</template>
<script>
export default {
  name: 'CardModal',
  props: {
    depart: {
      defalut: '',
      type: String
    },
    replyTime: {
      defalut: '',
      type: String
    },
    type: {
      type: String,
      default: ''
    },
    isReply: {
      type: [String, Number],
      default: ''
    }
  }
};
</script>
<style lang="less" scoped>
.cockpit-card-modal {
  width: 180px;
  height: 108px;
  background-image: url('~@/assets/Image/cockpit-blue-modal.png');
  background-size: 100% 100%;
  padding: 12px 38px;
  box-sizing: border-box;
  position: relative;
  >h1 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #3C83D8;
  }
  >p {
      font-size: 15px;
      font-weight: 500;
      color: #FFFFFF;
      margin: 0;
      margin-top: 4px;
      line-height: 1.2;
    }
  >p:nth-child(3) {
    font-size: 12px;
    font-weight: 400;
    color: #AAAAAA;
    margin-top: 6px;
  }
  >p:nth-child(4) {
    position: absolute;
    bottom: -8px;
    left: 50px;
    font-size: 12px;
    font-weight: 400;
    color: #3C83D8;
  }

  &.cockpit-card-modal-yellow {
    background-image: url('~@/assets/Image/cockpit-yellow-moda.png');
    >h1 {
      color: #E59534;
    }
    >p:nth-child(4) {
      color: #3C83D8;
    }
  }
}
</style>
